<template>
  <div class="container">
    <img :src="avatar" />
    <div class="image"></div>
    <div class="basic">
      <el-form label-width="auto">
        <el-form-item label="用户名">
          <el-input v-model="userName" :disabled="!edit1" style="width: 300px"></el-input>
          <h2 class="editBasic" @click="editBasic()">修改</h2>
        </el-form-item>
        <el-button v-if="edit1" @click="confirm()" type="primary" class="button">确定</el-button>
        <el-button v-if="edit1" @click="cancel()">取消</el-button>
        <el-form-item label="钱包">
          <el-input v-model="wallet" disabled style="width: 300px"></el-input>
          <h2 class="editBasic" @click="charge">充值</h2>
        </el-form-item>
      </el-form>
    </div>

    <div class="password">
      <el-form label-width="auto">
        <el-form-item label="旧密码">
          <el-input type="password" v-model="oldPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" v-model="newPassword" show-password></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="confirmChange">确定</el-button>
      <el-button @click="resetForm">取消</el-button>
    </div>
    <el-dialog v-model="dialogFormVisible">
      <el-form style="width: 80%" ref="formRef">
        <el-form-item label="充值金额" label-width="100px" prop="recharged">
          <el-input placeholder="0" v-model="recharged" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" size="default" @click="cancelR">取消</el-button>
        <el-button type="primary" size="default" @click="confirmR">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { getInfo, updateUserInfo, updatePassword, recharge } from '../api/goods'
import useUserStore from '@/stores/modules/user'
import { disabledTimeListsProps } from 'element-plus/es/components/time-picker/src/props/shared.mjs'

const useStore = useUserStore()
const userName = ref('')
const wallet = ref(0)
const avatar = ref('')
const oldPassword = ref('')
const newPassword = ref('')

const recharged = ref(0)

const temp_userName = ref('')
const edit1 = ref(false)
const dialogFormVisible = ref<boolean>(false)
//对话框取消
const cancelR = () => {
  dialogFormVisible.value = false
}
const confirmR = async () => {
  const result: any = await recharge(recharged.value)
  if (result.code == 0) {
    dialogFormVisible.value = false
    ElMessage({
      type: 'success',
      message: '充值成功',
    })
    fetchUserInfo()
  } else {
    ElMessage({
      type: 'error',
      message: '充值失败',
    })
    dialogFormVisible.value = false
  }
}
onMounted(() => {
  fetchUserInfo()
})

async function charge() {
  dialogFormVisible.value = true
  recharged.value = 0
}

//获取个人信息
async function fetchUserInfo() {
  await useStore.userInfo()
  userName.value = useStore.userName
  wallet.value = useStore.wallet
  avatar.value = useStore.avatar
}

//修改个人信息
function editBasic() {
  temp_userName.value = userName.value
  edit1.value = true
}
async function confirm() {
  const personal_info = 'aaa'
  const result: any = await updateUserInfo(userName.value, personal_info)
  if (result.code == 0) {
    ElNotification.success({ title: '成功' })
    edit1.value = false
  } else {
    userName.value = temp_userName.value
    Promise.reject(new Error(result.data))
  }
}
function cancel() {
  edit1.value = false
  userName.value = temp_userName.value
}

//修改密码
async function confirmChange() {
  const result: any = await updatePassword(oldPassword.value, newPassword.value)
  console.log(result)
  if (result.code === 0) {
    ElNotification.success({ title: '成功' })
    resetForm()
  } else {
    ElNotification.error({ title: '错误' })
  }
}
function resetForm() {
  oldPassword.value = ''
  newPassword.value = ''
}
</script>

<style lang="scss" scoped>
.container {
  background-color: rgba(255, 255, 255, 0.493);
  padding: 30px 100px;
  font-family: Roboto;
  cursor: default;
  img {
    height: 80px;
    width: 80px;
    border-radius: 40px;
    background-color: #9f4e4e3c;
  }
  .basic {
    position: relative;
    border: 1px solid rgb(162, 153, 153);
    border-radius: 8px;
    padding: 50px 40px 20px 40px;
    margin: 20px 100px 0 0;
    h2:hover {
      color: #1365e9b7;
    }
    .editBasic {
      font-size: 12px;
      margin: 0 0 0 30px;
      color: #626060;
    }
  }
  .password {
    position: relative;
    border: 1px solid rgb(162, 153, 153);
    border-radius: 8px;
    padding: 30px 40px 20px 40px;
    margin: 20px 100px 0 0;
  }
}
</style>
